<template>
	<view>
		<!-- 搜索框 -->
		<view class="position-fixed left-0 right-0 window-top align-center" style="z-index: 2;">
			<view class="flex align-center u-p-x-30 main-bg-color" style="height: 88rpx;">
				<view class="flex align-center flex-column u-m-r-30" style="width: 100rpx;" @click="toMap">
					<image src="/static/index/dizhi.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
					<view class="font-20 font-weight-bold text-center text-ellipsis" style="color:#fff;width: 100rpx;">
						{{ addressName }}</view>
				</view>
				<u-search v-model="formData.name" animation @custom="custom" @search="custom" @clear="clear"
					:actionStyle="{color: '#fff'}" style="width:100%"></u-search>
			</view>
			<u-tabs :list="merchCategoryList" active-color="var(--mainColor)" :current="current"
				@change="change"></u-tabs>
		</view>
		<!-- 滚动区域 -->
		<mescroll-body ref="mescrollRef" top="176rpx" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:bottombar="false">
			<view class="u-m-x-20 u-p-t-20">
				<view class="u-p-20 u-m-b-20 rounded-20 bg-white" v-for="(item,index) in merchList" :key="index">
					<dy-supplier-sec-item2 :item="item" imgSize="120rpx"></dy-supplier-sec-item2>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import amap from '@/common/map/amap-wx.130.js';
	import {
		SupplierCenterApi
	} from '@/api/serves.js'
	export default {
		mixins: [MescrollMixin], // 使用 mixin
		data() {
			return {
				// 商户分类列表
				merchCategoryList: [],
				current: 0,
				// 商户列表
				merchList: [],
				mapData: {},
				addressName: "",
				formData: {
					category_id: -1,
					name: "",
				},
			};
		},
		computed: {},
		onLoad() {
			uni.$on('changeLocation', (location) => {
				console.log('sssssssssssss', location);
				this.mapData = {
					lat: location.latitude,
					lng: location.longitude
				}
				this.addressName = location.name
			})
		},
		methods: {
			// 切换菜单
			change(index) {
				if (this.current == index) return
				this.current = index
				this.formData.category_id = this.merchCategoryList[index].id
				this.mescroll.resetUpScroll()
			},
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				this.getAddress(page)
			},
			// 商户分类
			getMerchCategoryList(page) {
				SupplierCenterApi.getMerchCategoryList({
					type: 2
				}).then(res => {
					console.log('商户分类', res);
					if (res.code == 1) {
						if (res.data.data.length) {
							res.data.data.unshift({
								category_id: -1,
								name: '全部'
							})
							this.merchCategoryList = res.data.data
						}
						this.getMerchOfflineMerchList(page)
					}
				})
			},
			custom(key) {
				this.mescroll.resetUpScroll()
			},
			clear() {
				this.formData.name = ''
				this.mescroll.resetUpScroll()
			},
			// 获取商户列表
			getMerchOfflineMerchList(page) {
				this.formData.page = page.num
				console.log('查询参数', this.formData);
				SupplierCenterApi.getMerchOfflineMerchList({
					...this.formData,
					...this.mapData
				}).then(res => {
					console.log('获取商户列表', res);
					if (res.code == 1) {
						res.data.forEach(item => {
							item.merch_id = item.id
						})
						if (page.num == 1) this.merchList = []; //如果是第一页需手动制空列表
						this.merchList = this.merchList.concat(res.data); //追加新数据
						this.mescroll.endByPage(res.data.length, res.totalpage)
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			// 获取当前定位
			getAddress(page) {
				var that = this;
				const myAmapFun = new amap.AMapWX({
          		key: '2d7598b3c967379ffd30b5ac841e6cbe'
				});
				uni.showLoading({
					title: '获取信息中'
				});
				myAmapFun.getRegeo({
					success: function(data) {
						//成功回调
						console.log('当前定位', data);
						if (!that.addressName) {
							that.addressName = data[0].name
							that.mapData = {
								lat: data[0].latitude,
								lng: data[0].longitude
							}
						}
						if (that.merchCategoryList.length > 0) {
							that.getMerchOfflineMerchList(page)
						} else {
							that.getMerchCategoryList(page)
						}
						uni.hideLoading();
					},
					fail: function(info) {
						//失败回调
						console.log(info)
						uni.showToast({
							title: "获取位置失败，请重启小程序",
							icon: "error"
						})
					}
				})
			},
			// 跳转搜索店铺
			tosearchPage() {
				uni.navigateTo({
					url: '/pages/supplierPage/supplierSearch/supplierSearch'
				})
			},
			toMap() {
				uni.navigateTo({
					url: '/pages/map/map?location=' + JSON.stringify({
						...this.mapData,
						locationName: this.addressName
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>